<template>
  <div class="overdue_list">
    <div class="common_form_search">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchForm"
      >
        <el-form-item label="订单号">
          <el-input
            v-model="searchForm.orderNo"
            placeholder="请输入订单号"
            clearable
          />
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input
            v-model="searchForm.goodsName"
            placeholder="请输入商品名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input
            v-model="searchForm.shopName"
            placeholder="请输入供应商名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input
            v-model="searchForm.receivingName"
            placeholder="请输入姓名"
            clearable
          />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
            v-model="searchForm.receivingMobile"
            placeholder="请输入手机号"
            clearable
          />
        </el-form-item>

<!--        <el-form-item label="逾期天数">-->
<!--          <div class="overdue_day_input">-->
<!--            <el-input-->
<!--              v-model="searchForm.min"-->
<!--              style="width:80px"-->
<!--              placeholder="0"-->
<!--              clearable-->
<!--              @input="val=>changeNumberInput('min',val)"-->
<!--            />-->
<!--            <span>至</span>-->
<!--            <el-input-->
<!--              v-model="searchForm.max"-->
<!--              style="width:80px"-->
<!--              placeholder="0"-->
<!--              clearable-->
<!--              @input="val=>changeNumberInput('max',val)"-->
<!--            />-->
<!--          </div>-->
<!--        </el-form-item>-->
        <el-form-item label="预计扣款日">
<!--          <my-date-picker ref="myDatePicker" />-->
          <el-date-picker
              v-model="searchForm.value1"
              type="daterange"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="支付状态">
          <el-select
              v-model="searchForm.sendStatus"
              placeholder="全部"
              clearable
          >
            <el-option
                label="已支付"
                :value="1"
            />
            <el-option
                label="未支付"
                :value="2"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
<!--          <span style="padding-left: 1600px"></span>-->
          <el-button
            size="small"
            type="primary"
            @click="search()"
          >查询</el-button>
          <el-button
            size="small"
            @click="reset()"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider />
    <div class="flex flex-between-center table-top-btns">
      <div class="flex align-center">
        <h5 class="flex align-center">
          <svg-icon
            style="margin-right:15px"
            icon-class="list"
            :size="15"
          />数据列表
        </h5>
        <el-tooltip
          class="item"
          effect="dark"
          content="一个账单一个月只能发送一次短信"
          placement="top-start"
        >
          <el-button
            v-if="$hasMethod('#batchSend')"
            size="small"
            class="add-btn svg-btn"
            @click="batchSend"
          >
            <svg-icon
              icon-class="batch"
              :size="11"
            />批量发送短信
          </el-button>
        </el-tooltip>
        <el-button
          v-if="$hasMethod('#export')"
          size="small"
          icon="el-icon-upload2"
          class="export-btn"
          @click="exportFile"
        >导出</el-button>
      </div>
      <p style="font-size:12px;color:#000000">
        <span>账单总数量：{{ overdueCount }}条</span>
<!--        <span style="margin-left:20px">逾期总金额：{{ overdueAmount }}元</span>-->
      </p>
    </div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      row-key="id"
      border
      :tree-props="{ children: 'children' }"
    >
      <el-table-column
        fixed
        align="center"
        type="selection"
        width="55"
      />
      <el-table-column
        fixed
        align="center"
        label="订单号"
      >
        <template slot-scope="scope">
          <span
            class="blue-font pointer"
            @click="goToOrder(scope.row.trade_no)"
          >{{ scope.row.trade_no }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="goods_title"
        label="商品名称"
      />
      <el-table-column
          align="center"
          label="订单来源"
          prop="source"
      >
        <template slot-scope="scope">
          <span>{{scope.row.name == null ? '自然流量' : scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="第几期"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.which_period }}/{{ scope.row.month_total }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="租期"
        width="110"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.begin_time }}/{{ scope.row.end_time }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="begin_time"
        label="预计扣款日"
        width="100"
      />
      <el-table-column
        align="center"
        prop="rent"
        label="账单金额"
      />
      <el-table-column
        align="center"
        prop="paid_rent"
        label="实付金额"
      />
      <el-table-column
        align="center"
        prop="withhold_num"
        label="扣款次数"
      />
      <el-table-column
        align="center"
        prop="cert_name"
        label="姓名"
      />
      <el-table-column
        align="center"
        prop="mobile"
        label="手机号"
      />
      <el-table-column
        align="center"
        prop="realname"
        label="收货人"
      />
      <el-table-column
        align="center"
        prop="prov"
        label="省"
      />
      <el-table-column
        align="center"
        prop="city"
        label="市"
      />
      <el-table-column
        align="center"
        prop="area"
        label="区/县"
      />
      <el-table-column
        align="center"
        prop="address"
        label="收货地址"
        width="120"
      />
      <el-table-column
        align="center"
        label="订单状态"
        prop="statusName"
      />


      <el-table-column
        align="center"
        label="支付状态"
      >
        <template slot-scope="scope">
          <span :style="{'color':(scope.row.lease_status == 0 ? 'red' : 'black'),'font-size':(scope.row.lease_status == 0  ? '18px':'14px'),'font-weight':(scope.row.lease_status == 0  ? 'bold':'')}">{{ scope.row.lease_status==1?'已支付':scope.row.lease_status==2?'已退款':scope.row.lease_status==3?'已买断':scope.row.lease_status==4?'已逾期':'未支付' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="overdue_days"
        label="逾期天数"
      />
      <el-table-column
        align="center"
        prop="sms_num"
        label="发送次数"
      />
      <el-table-column
        align="center"
        width="100"
        label="短信状态"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.send_status==1?'':'success'">{{ scope.row.send_status==1?'未发送':'已发送' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        align="center"
        prop="shopname"
        label="供应商名称"
      />
<!--      <el-table-column-->
<!--        fixed="right"-->
<!--        align="center"-->
<!--        width="190"-->
<!--        label="操作"-->
<!--      >-->
<!--        <template slot-scope="scope">-->
<!--          <el-button-->
<!--            v-if="$hasMethod('#withhold')"-->
<!--            style="margin-right:10px"-->
<!--            type="warning"-->
<!--            size="mini"-->
<!--            @click="withholdItem(scope.row.order_id,scope.row.lease_id)"-->
<!--          >发起代扣 </el-button>-->
<!--          <el-dropdown-->
<!--            v-if="$hasMethod('#viewRecord')||$hasMethod('#viewRemark')"-->
<!--            @command="command=>handleMore(command,scope.row)"-->
<!--          >-->
<!--            <span-->
<!--              class="el-dropdown-link blue-font pointer"-->
<!--              style="margin-left:10px"-->
<!--            >-->
<!--              更多操作<i class="el-icon-arrow-down el-icon&#45;&#45;right" />-->
<!--            </span>-->
<!--            <el-dropdown-menu slot="dropdown">-->
<!--              <el-dropdown-item-->
<!--                v-if="$hasMethod('#viewRecord')"-->
<!--                command="1"-->
<!--              >查看记录</el-dropdown-item>-->
<!--              <el-dropdown-item-->
<!--                v-if="$hasMethod('#viewRemark')"-->
<!--                command="2"-->
<!--              >查看备注</el-dropdown-item>-->
<!--            </el-dropdown-menu>-->
<!--          </el-dropdown>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    <custom-page
      ref="customPage"
      :total="total"
      @getList="getList"
    />
    <view-dialog
      ref="viewDialog"
      :view-item="selectedItem"
    />
    <remark-dialog
      ref="remarkDialog"
      :order-id="selectedItem.order_id"
      :which-period="selectedItem.which_period"
    />
  </div>
</template>

<script>
import customPage from '@/components/customPage'
import myDatePicker from '@/components/myDatePicker'
import { financeOverdueList, overdueListExport, manualWithholding, sendOverdueSms,accountantDayList } from '@/api/finance'
import viewDialog from './view'
import remarkDialog from './remark'
export default {
  components: { customPage, myDatePicker, viewDialog, remarkDialog },
  data() {
    return {
      searchForm: {
        orderNo: '',
        goodsName: '',
        shopName: '',
        receivingName: '',
        receivingMobile: '',
        sendStatus: '',
        value1: ''
      },
      tableData: [],
      total: 0,
      overdueCount: 0,
      overdueAmount: 0,
      selectedItem: {}
    }
  },
  mounted() {
    const start = new Date();
    let year = start.getFullYear();
    var month = start.getMonth()+1;
    var day = start.getDate();
    let str = [year,month,day];
    let startTime = str.join('-');
    let endTime =  str.join('-');
    var arr=[];
    arr[0] = startTime + " "+'00:00:00' ;
    arr[1] = endTime + " "+'23:59:59';
    this.searchForm.value1=arr;
    this.getList();
  },
  methods: {
    batchSend() {
      const list = this.$refs.multipleTable.selection
      if (list.length === 0) {
        this.$message({
          message: '没有勾选项',
          type: 'warning'
        })
        return
      }
      const ids = list.map(k => k.lease_id).join(',')
      sendOverdueSms(ids).then(res => {
        this.getList()
      })
    },
    // 发起代扣
    withholdItem(orderId, leaseId) {
      const that = this
      this.$confirm('您确定要发起代扣吗？', '发起代扣', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        manualWithholding({ orderId, leaseId }).then(res => {
          setTimeout(() => {
            that.getList()
          }, 1000)
        })
      }).catch(() => { })
    },
    handleMore(command, item) {
      this.selectedItem = item
      if (command == 1) {
        // 查看记录
        this.$refs.viewDialog.dialogVisible = true
      } else {
        // 查看备注
        this.$refs.remarkDialog.dialogVisible = true
      }
    },
    goToOrder(orderId) {
      if (orderId) {
        this.$router.push({ name: 'orderList', params: { orderId }})
      }
    },
    exportFile() {
      const pickerVal = this.$refs.myDatePicker.getVal()
      // const pickerVal=this.articleFrom.value1[0]+'~'+this.articleFrom.value1[1];
      if (pickerVal == 'error') {
        return
      }
      this.searchForm.leaseTime = pickerVal
      const params = { ...this.searchForm }
      params.overdueDay = params.min && params.max ? params.min + '~' + params.max : ''
      delete params.min
      delete params.max
      overdueListExport(params)
    },
    // changeNumberInput(key, value) {
    //   const pattern = /^[1-9][0-9]*$/ // 正整数的正则表达式
    //   // 不符合正整数时
    //   if (!pattern.test(value)) {
    //     // input 框绑定的内容为空
    //     this.searchForm[key] = ''
    //   }
    // },
    // 获取数据
    getList() {
      const { page, pageSize } = this.$refs.customPage
      const params = { ...this.searchForm }
      // params.overdueDay = params.min && params.max ? params.min + '~' + params.max : ''
      // delete params.min
      // delete params.max
      accountantDayList({
        page,
        pageSize,
        ...params
      }).then(res => {
        this.overdueCount=res.count;
        const { list: { data, total }, count: { overdueCount }} = res;
        this.tableData = data || []
        this.total = total || 0
        this.overdueCount = overdueCount
        // this.overdueAmount = overdueAmount
      })
    },
    // 查询
    search() {
      // const pickerVal = this.$refs.myDatePicker.getVal();
      // const pickerVal = this.searchForm.value1[0]+'~'+this.searchForm.value1[1];
      // if (pickerVal == 'error') {
      //   return
      // }
      // this.searchForm.value1 = pickerVal
      // console.log(this.searchForm.value1);
      this.$refs.customPage.page = 1
      this.getList()
    },
    // 重置
    reset() {
      // if (this.$refs.myDatePicker) {
      //   this.$refs.myDatePicker.reset()
      // }
      this.searchForm = {
        orderNo: '',
        goodsName: '',
        shopName: '',
        receivingName: '',
        receivingMobile: '',
        sendStatus: '',
        min: '',
        max: '',
        value1: ''
      }
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.overdue_day_input {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  /deep/.el-input__inner {
    border: none;
  }
}
</style>
